<template>
  <el-dialog
    :title="title"
    :visible="visible"
    width="900px"
    :before-close="closeForm"
    :close-on-click-modal="false"
  >
    <el-tabs v-model="active" @tab-click="loadMsgs">
      <el-tab-pane v-for="item in forms" :key="item.FormId" :label="item.FormName+ (item.IsDefault ? '(默认)': '')">
        <p style="text-align: right;">
          <el-button type="success" size="mini" @click="add">添加</el-button>
        </p>
        <w-table
          :data="msgList"
          :columns="columns"
          :is-paging="false"
        >
          <template slot="dataType" slot-scope="e">
            <span v-if="MsgDataType[e.row.DataType]"> {{ MsgDataType[e.row.DataType].text }}</span>
          </template>
          <template slot="sort" slot-scope="e">
            <el-button
              v-if="e.row.sort != 1"
              icon="el-icon-caret-top"
              size="mini"
              style="float: left"
              circle
              @click="upItem(e.row)"
            />
            <el-button
              v-if="e.row.sort != msgList.length"
              size="mini"
              style="float: right"
              icon="el-icon-caret-bottom"
              circle
              @click="downItem(e.row, e.index)"
            />
          </template>
          <template slot="show" slot-scope="e">
            <span v-if="e.row.DataType == 0"> {{ e.row.Value }}</span>
            <span v-else>{{ e.row.Show }}</span>
          </template>
          <template slot="action" slot-scope="e">
            <el-button
              icon="el-icon-edit"
              size="mini"
              type="primary"
              circle
              @click="edit(e.row)"
            />
            <el-button
              size="mini"
              icon="el-icon-delete"
              type="danger"
              circle
              @click="remove(e.row)"
            />
          </template>
        </w-table>
      </el-tab-pane>
    </el-tabs>
    <flowAppMsgEdit :form-id="formId" :source="curItem" :visible.sync="editVisible" @save="saveItem" />
  </el-dialog>
</template>

<script>
import { DictItemDic, MsgDataType } from '@/flow/config/flowConfig'
import { GetForms } from '@/flow/api/flow'
import * as appMsgApi from '@/flow/api/flowAppMsg'
import flowAppMsgEdit from './flowAppMsgEdit.vue'
export default {
  components: {
    flowAppMsgEdit
  },
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    id: {
      type: String,
      default: null
    },
    flowId: {
      type: String,
      default: null
    },
    appName: {
      type: String,
      default: null
    }
  },
  data() {
    return {
      DictItemDic,
      MsgDataType,
      title: '编辑流程消息模版',
      active: 0,
      curItem: null,
      editVisible: false,
      forms: [],
      maxSort: 1,
      msgList: [],
      source: null,
      curId: 1,
      formId: null,
      columns: [
        {
          key: 'Label',
          title: '文本',
          align: 'center',
          width: 120
        },
        {
          key: 'DataType',
          title: '数据类型',
          align: 'center',
          slotName: 'dataType',
          width: 100
        },
        {
          key: 'Show',
          title: '说明',
          align: 'left',
          minWidth: 120,
          slotName: 'show'
        }, {
          key: 'Sort',
          title: '排序',
          align: 'center',
          width: 120,
          slotName: 'sort'
        },
        {
          key: 'Action',
          title: '操作',
          align: 'left',
          width: 120,
          slotName: 'action'
        }
      ]
    }
  },
  computed: {},
  watch: {
    visible: {
      handler(val) {
        if (val) {
          this.active = '0'
          this.curId = 1
          this.loadForm()
        }
      },
      immediate: true
    }
  },
  methods: {
    add() {
      this.curItem = null
      this.editVisible = true
    },
    edit(row) {
      this.curItem = row
      this.editVisible = true
    },
    remove(row) {
      const index = this.source.findIndex(a => a.id === row.id)
      if (index !== -1) {
        this.source.splice(index, 1)
        this.msgList = this.msgList.filter(a => a.id !== row.id)
        this.save()
      }
    },
    upItem(row) {
      const index = this.source.findIndex(a => a.id === row.id)
      if (index > 0) {
        const t = this.source[index]
        this.source[index] = this.source[index - 1]
        this.source[index - 1] = t
        this.loadMsgs()
      }
    },
    downItem(row) {
      const index = this.source.findIndex(a => a.id === row.id)
      if (index < this.source.length) {
        const t = this.source[index]
        this.source[index] = this.source[index + 1]
        this.source[index + 1] = t
        this.save()
      }
    },
    saveItem(id, data) {
      if (id == null) {
        data.id = this.curId
        data.FormId = this.formId
        this.curId = this.curId + 1
        this.source.push(data)
        this.msgList.push(data)
      } else {
        const item = this.source.find(c => c.id === id)
        item.Label = data.Label
        item.DataType = data.DataType
        item.Value = data.Value
        item.ColId = data.ColId
        item.Keywords = data.Keywords
        item.IsRow = data.IsRow
        item.IsRed = data.IsRed
        item.Show = data.Show
      }
      this.save()
    },
    async save() {
      const datas = this.msgList.map(a => {
        const data = Object.assign({}, a)
        delete data.id
        delete data.FormId
        delete data.sort
        return data
      })
      await appMsgApi.Set(this.id, this.formId, datas)
      this.$message({
        type: 'success',
        message: '保存成功!'
      })
      this.loadMsgs()
    },
    async loadForm() {
      const data = await GetForms(this.flowId)
      this.forms = data
      this.title = '编辑' + this.appName + '流程消息模版'
      this.loadList()
    },
    closeForm() {
      this.$emit('update:visible', false)
    },
    loadMsgs() {
      if (this.forms.length > 0) {
        const form = this.forms[this.active]
        this.formId = form.FormId
        const items = this.source.filter(c => c.FormId === form.FormId)
        for (let i = 0; i < items.length; i++) {
          items[i].sort = i + 1
        }
        this.msgList = items
      }
    },
    async loadList() {
      const list = await appMsgApi.Gets(this.id)
      list.forEach(c => {
        c.id = this.curId
        this.curId = this.curId + 1
      })
      this.source = list
      this.loadMsgs()
    }
  }
}
</script>
